import React, { Fragment } from 'react';
import { observer, inject } from 'mobx-react';
import PageLayout from 'components/layouts/pageLayout';
import moment from 'moment';
import css from './index.less';
import { Table, Card, Radio } from 'antd';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

@inject('store')
@observer
export default class WinnersPage extends React.Component {
  state = {
    selectedRowKeys: [],
  };

  componentDidMount() {
    this.props.store.winners.getWinnersList();
    this.props.store.winners.getPrizeList();
  }

  renderTable() {
    // const { selectedRowKeys } = this.state;
    const { listData, total, loading, pageNo, pageSize } = this.props.store.winners;
    const columns = [
      {
        title: '名字',
        dataIndex: 'name',
      },
      {
        title: '电话',
        dataIndex: 'tel',
      },
      {
        title: '地址',
        dataIndex: 'address',
      },
      {
        title: '奖品',
        dataIndex: 'prize',
      },
    ];

    const props = {
      loading,
      columns,
      rowKey: record => record.id,
      dataSource: listData,
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        currentPage: pageNo,
        pageSize: pageSize,
        total,
        onChange: (val) => {
          this.props.store.winners.update({
            pageNo: val,
          });
        },
        onShowSizeChange: (val, size) => {
          this.props.store.winners.update({
            pageSize: size,
          });
        }
      }
    };

    return (
      <Table {...props}/>
    );
  }

  render() {
    const { winners, winners: {prizeList, awardType} } = this.props.store;
    const props = {
      value: awardType,
      onChange: (e) => {
        winners.update('awardType', e.target.value);
      },
    };
    return (
      <PageLayout>
        <Card className={css.btnBox}>
          <RadioGroup {...props}>
            <RadioButton value={0}>全部</RadioButton>
            {
              prizeList.map(item => <RadioButton key={item.id} value={item.id}>{item.title}</RadioButton>)
            }
          </RadioGroup>
        </Card>
        <Card bordered={false}>
          <div className={css.tableList}>
            {
              this.renderTable()
            }
          </div>
        </Card>
      </PageLayout>
    );
  }
}
